<template>
    <div class="minishop-xzrq pt13">
        <div class="plr15">
            <div class="kitbox fs-12 c-fff date-section plr15">
                <div class="flex1 pt5">
                    <div>入住</div>
                    <div class="pt2">{{startDate}} {{startWeek}}</div>
                </div>
                <div class="pt16">
                    <div class="icon">共{{days}}晚</div>
                </div>
                <div class="tr flex1 pt5">
                    <div>离店</div>
                    <div class="pt2">{{endDate}} {{endWeek}}</div>
                </div>
            </div>
        </div>

        <div class="mt22 plr18">
            <div class="shadow  ">
                <div class="kitbox c-131313 fs-18 pt30 plr30">
                    <div class="left"><van-icon @click="setMonth(-1)" name="arrow-left" /></div>
                    <div class="flex1 tc">{{monthStr}}</div>
                    <div class="right"><van-icon @click="setMonth(1)" name="arrow" /></div>
                </div>

                <div class="date-header plr17 mt28">
                    <div class="item" v-for="(item, i) in date" :key="i">{{item}}</div>
                </div>
                <div class="date-box plr17 mt10" v-if="dateArr&&dateArr.length>0">
                    <div class="item" 
                        @click="selDate(item)"
                        v-for="(item, i) in dateArr" :key="i"
                        :class="{
                            not: curTime>item.time,
                            active: selDateVal.length==2&& item.name>=start&&item.name<=end, 
                            first: item.name==start, 
                            end: item.name==end, 
                            select: selDateVal.length==1&&item.val==selDateVal[0].val}">
                        <div class="tc" ><span>{{item.name}}</span></div>
                    </div>
                </div>

                <div class="pt25 plr30"></div>
                <div class=" plr30">
                    <div class="kitbox pt30   bt-f0f0f0" v-if="selDays>0">
                        <div class="flex1 fs-18 c-2a2a2a">{{selStartDateStr}}<span class="fs-11 c-6c6a6e">入住</span></div>
                        <div class="fs-16 c-c9994a">共{{selDays}}晚</div>
                        <div class="flex1 fs-18 c-2a2a2a tr"><span class="fs-11 c-6c6a6e mr5">离开</span>{{selEndDateStr}}</div>
                    </div>
                </div>

                <div class="check-btn">
                    <van-button @click="checkSel" size="small" round color="#c9994a" type="primary" block>确认日期</van-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import houseApi from "@/api/api-house";
import moment from '@/plugins/utils/moment.js'
export default {
    data () {
        var weekday = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
        // var day = moment().format('YYYY-MM-DD'),
        //     week =  weekday[moment().weekday()]

        return {
            weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
            date: ['日', '一', '二', '三', '四', '五', '六'],
            dateArr: [],

            month: new Date(),
            monthStr: moment().format('YYYY年MM月'),
            curTime: moment(moment().format('YYYY-MM-DD')).toDate().getTime(),
            // startDate: day,
            // endDate: day,
            // startWeek: week,
            // endWeek: week,
            // days: 1,

            startDate: "",
            endDate: "",
            startWeek: "",
            endWeek: "",
            days: 0,

            selStartDateStr: "",
            selEndDateStr: "",
            selDays: 0,

            selDateVal: [],
            start: -1,
            end: -1,
            from: ""
        }
    },
    watch: {
        
    },
    components: {
        
    },
    onLoad(options){
        this.from = options.from
        this.startDate = options.startDate
        this.endDate = options.endDate
        this.startWeek = this.weekday[moment(this.startDate).weekday()]
        this.endWeek = this.weekday[moment(this.endDate).weekday()]
        this.days = moment(this.endDate).diff(moment(this.startDate), 'days');     
    },
    mounted () {
        this.initPage()
    },
    onShow(){
        
    },
    methods: {
        initPage(){
            this.dateInit()
        },
        setMonth(diff){
            var m = moment(this.month).add(diff, 'months');
            this.month = m.toDate()
            this.monthStr = m.format('YYYY年MM月')
            this.accessStartAndEnd()
            this.dateInit()
        },
        dateInit() {
            let dateArr = [];//需要遍历的日历数组数据
            let arrLen = 0;	//dateArr的数组长度
            let now = this.month;
            let year = now.getFullYear();
            let month = now.getMonth();					//没有+1方便后面计算当月总天数
            let startWeek = moment(now).startOf('month').day();	//目标月1号对应的星期
            let dayNums = moment(now).endOf('month').date();				//获取目标月有多少天

            arrLen = startWeek + dayNums;
            for (let i = 0; i < arrLen; i++) {
                if (i >= startWeek) {
                    var d = i - startWeek + 1
                    var date = new Date(year, month, d)
                    dateArr[i] = {name: d, val: moment(date).format('YYYY-MM-DD'), time: date.getTime() };
                } else {
                    dateArr[i] = {name: '', val: '', time: 0};
                }
            }
            this.dateArr = dateArr
        },
        ListHouse(isReload){
            var vm = this
            if(isReload){
                this.pageIndex = 1
                this.finished = false
            } else {
                this.pageIndex++
            }
            this.loading = true
            houseApi.ListHouse({
                pageIndex: this.pageIndex,
                pageSize: this.pageSize
            }).then(data => {
                res = res.result
                this.finished = res.IsLastPage
                this.loading = false
                
                if(isReload){
                    this.list = res.List || []
                } else {
                    this.list = this.list.concat(res.List || [])
                }
            })
        },
        selDate(item){
            if(!item.name){
                return
            }
            if(this.curTime>item.time){
                return
            }
            
            
            if(this.selDateVal.length==0){
                this.selDateVal = [JSON.parse(JSON.stringify(item))]
            } else if(this.selDateVal.length==2){
                this.selDateVal = [JSON.parse(JSON.stringify(item))]
            } else {
                if(this.selDateVal[0].val == item.val){
                    return
                }
                
                if(moment(this.selDateVal[0].val).isAfter(moment(item.val))){
                    this.selDateVal[1] = this.selDateVal[0]
                    this.selDateVal[0] = JSON.parse(JSON.stringify(item))
                } else {
                    this.selDateVal[1] = JSON.parse(JSON.stringify(item))
                }
            }
            this.accessStartAndEnd()
        },
        accessStartAndEnd(){
            if(this.selDateVal.length==2){
                var sm = moment(this.selDateVal[0].val)
                var m = sm.format('YYYY年MM月')
                if(m == this.monthStr){
                    //当月
                    this.start = sm.date()
                } else {
                    this.start = -1
                }

                var sm1 = moment(this.selDateVal[1].val)
                var m1 = sm1.format('YYYY年MM月')
                if(m1 == this.monthStr){
                    //当月
                    this.end = sm1.date()
                } else {
                    this.end = m == m1? -1 : 999
                }
                this.selStartDateStr = sm.format('MM月DD日')
                this.selEndDateStr = sm1.format('MM月DD日')
                this.selDays = sm1.diff(sm, 'days')
            } else {
                this.start = -1
                this.end = -1
            }
        },
        checkSel(){
            if(this.selDateVal.length!=2){
                wx.showToast({
                    title: '请选择日期',
                    icon: 'none',
                    duration: 2000
                })
                return
            }
            // if(this.from == 1){
                wx.setStorageSync("search-mslb", 1)
                wx.setStorageSync("search-mslb-startDate", this.selDateVal[0].val) 
                wx.setStorageSync("search-mslb-endDate", this.selDateVal[1].val) 
                wx.navigateBack({})
            // }
        }
    }
}
</script>

<style  lang="scss">
@import './scss/xzrq.scss';
</style>
